<template>
  <el-dialog
    v-model="visible"
    title="附件上传"
    width="800"
    show-footer
    show-zoom
    resize
    @close="close"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :z-index="2000"
  >
    <div class="mb-4">
      <VSelect
        v-model="prove_type"
        :options="proveOptions"
        placeholder="请选择"
        filterable
        clearable
      />
    </div>
    <div class="flex justify-between uploadBox">
      <VUpload
        :limit="999"
        :validator="validator"
        :is_checkout="true"
        :progress="true"
        type="file"
        accept=".JPG, .PNG, .JPEG,.jpg, .png, .jpeg, .PDF"
        @success="success"
      >
        <el-button type="primary" link class="flex items-center">
          <svg-icon class="mr-2 text-sm" icon-class="Plus"></svg-icon>
          上传文件
        </el-button>
      </VUpload>
    </div>
    <div class="mt-2 flex flex-wrap pt-4 pl-4" v-if="fileList.length">
      <div
        class="flex items-center w-full"
        v-for="(item, index) in fileList"
        :key="item.url"
      >
        <div class="line1 text-xs mr-4">{{ item.filename }}</div>
        <el-button type="danger" link @click="handleRemove(index)">删除</el-button>
      </div>
    </div>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="submitUpload()"
        >上 传</el-button
      >
    </template>
  </el-dialog>
</template>
<script setup name="ComModal">
import { ref } from "vue";
import VUpload from "@/components/VUpload/index.vue";
import { ElMessage } from "element-plus";
const emit = defineEmits(["uploadFile"]);

const proveOptions = [
  {
    label: "营业执照",
    value: "business_license",
  },
  {
    label: "税务登记",
    value: "tax_mark",
  },
  {
    label: "组织机构代码证",
    value: "organization_code",
  },
  {
    label: "收款账户确认函",
    value: "collect_confirm",
  },
  {
    label: "对私收款人身份证复印件",
    value: "id_copy",
  },
  {
    label: "银行开户许可证",
    value: "bank_permit",
  },
  {
    label: "合作协议上传",
    value: "cooperate_protocol",
  },
  {
    label: "其他",
    value: "other",
  },
];

const visible = ref(false);
const loading = ref(false);

const prove_type = ref("");
const fileList = ref([]);

const open = () => {
  prove_type.value = "business_license";
  visible.value = true;
};

const success = (obj) => {
  fileList.value = [
    {
      filename: obj.filename,
      filepath: obj["data-show-file"],
    },
  ];
};

const filterType = (type) => {
  const find = proveOptions.find((i) => i.value == type);
  if (find) {
    return find?.label;
  }
};

const handleRemove = (index) => {
  fileList.value.splice(index, 1);
};

// 上传校验
const validator = (fileInfo) => {
  return (() => {})();
};
// 文件上传
const submitUpload = () => {
  if (!prove_type.value) {
    ElMessage.error("请选择资质类型");
    return;
  }
  if (fileList.value.length == 0) {
    ElMessage.error("请上传附件");
    return;
  }

  emit("uploadFile", {
    ...fileList.value[0],
    type: prove_type.value,
    type_name: filterType(prove_type.value),
  });
  close();
};

const close = () => {
  fileList.value = [];
  visible.value = false;
};
defineExpose({ open });
</script>
<style lang="scss" scoped>
.uploadBox {
  height: 52px;
  border-radius: 4px;
  border: 1px dashed #3366f1;
  justify-content: center;
  align-items: center;

  .v-upload {
    width: 100%;
    height: 100%;

    :deep(.el-upload) {
      width: 100%;
      height: 52px;
    }
  }
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.upload-file-uploader {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

:deep(.el-upload-list) {
  width: 100%;
  display: flex;
  flex-direction: column;

  .el-upload-list__item {
    width: 100%;
    padding: 3px 50px;
  }
}
</style>
